<template>
  <div
    ref="popup"
    id="popup"
    class="popover ng-scope bottom am-flip-x"
    :style="visablestyle"
  >
    <a-card>
                <span slot="title">
                  <a-icon type="table"/>
                  <span style="margin-left:10px;">{{popupData.Title}}</span>
                </span>
                <a slot="extra" href="#" @click="popupClose">关闭</a>
<div v-if="popupData.contentType=='qy_basic'">
  
    <div v-show="qy_basic_info">
      <a-tabs
      :default-active-key="tabactiveKey"
      tab-position="top"
    >
    <a-tab-pane key="00" tab="基本信息">
        <table class="table">
          <tbody>
            <tr>
              <td>产品及规模</td>
              <td colspan="3">{{popupData.gm}}</td>
            </tr>
            <tr>
              <td>主要污染物</td>
              <td colspan="3">{{popupData.zywrw}}</td>
            </tr>

            <tr>
              <td>废气及治理工艺</td>
              <td colspan="3">{{popupData.fqzlgy}}</td>
            </tr>
            <tr>
              <td>控制类型</td>
              <td>{{popupData.kzlx}}</td>
              <td>生产情况</td>
              <td>{{popupData.scqk}}</td>
            </tr>
            <tr>
              <td>所属类别</td>
              <td>{{popupData.sslb}}</td>
             <td>行业类别</td>
              <td>{{popupData.hylb}}</td>
            </tr>
            <tr>
              <td>监测排放口</td>
              <td>{{popupData.pfkzs}} 个</td>
             <td>排放统计</td>
              <td><a href="#" @click="basic_static(popupData.qybh)">点击查看</a></td>
            </tr>
          </tbody>
        </table>

      </a-tab-pane>
      <a-tab-pane v-for="(item,index) in popupData.qyjcd" :key="index" :tab="item.qypwk">
        <table class="table">
          <tbody>
            <tr>
              <td>年均流量</td>
              <td>{{item.ll}} m³</td>
              <td>年均烟气温度</td>
              <td>{{item.yqwd}} ℃</td>
            </tr>
            <tr>
              <td>排放口高度</td>
              <td>{{item.pfkgd}} 米</td>
              <td>烟囱高度</td>
              <td>{{item.ycgd}} 米</td>
            </tr>
            <tr>
              <td>采样口横截面积</td>
              <td>{{item.cykmj}} ㎡</td>
                <td>排烟口直径</td>
              <td>{{item.pykzj}} 米</td>
             
            </tr>
            <tr>
             <td>烟囱场所</td>
              <td colspan="3">{{item.yccs}}</td>
            </tr>
            <tr>
            
              <td>排放标准</td>
              <td colspan="3">{{item.pfbz}}</td>
            </tr>
            <tr>
            
              <td>排放统计</td>
              <td colspan="3"><a href="#" @click="basic_static(item.jcdbh)">点击查看</a></td>
            </tr>
          </tbody>
        </table>
      </a-tab-pane>
    </a-tabs>
    </div>
    <div v-show="qy_basic_chart">
<a-tabs
      :default-active-key="chartactiveKey"
      tab-position="top"
    >
    <a-tab-pane key="20" tab="实时统计" :forceRender="forceRender">
        <div id="realst" style="height:270px;width:530px"></div>
      </a-tab-pane>
      <a-tab-pane key="21" tab="历史统计" :forceRender="forceRender">
        <div id="historyst" style="height:270px;width:530px"></div>
      </a-tab-pane>
      <a @click="gobasicinfo()" slot="tabBarExtraContent">
      返回
    </a>
    </a-tabs>
    </div>
     
    
                
</div> 
<div v-else-if="popupData.contentType=='mine'">
  <table class="table">
          <tbody>
            <tr>
              <td>申请单位</td>
              <td colspan="3">{{popupData.Name}}</td>
            </tr>
            <tr>
              <td>许可证号</td>
              <td colspan="3">{{popupData.lcode}}</td>
            </tr>
            <tr>
              <td>勘查单位</td>
              <td colspan="3">{{popupData.surveyunit}}</td>
            </tr>
            <tr>
              <td>申请序号</td>
              <td colspan="3">{{popupData.applyid}}</td>
            </tr>

            <tr>
              <td>有效期起</td>
              <td>{{popupData.datebegin}}</td>
              <td>有效期止</td>
              <td>{{popupData.dateend}}</td>
            </tr>
            <tr>
              <td>勘查矿种</td>
              <td>{{popupData.minttype}}</td>
              <td>总面积</td>
              <td>{{popupData.karea}}</td>
            </tr>
          </tbody>
        </table>
</div>
<div v-else-if="popupData.contentType=='CoalGanguehill'">
        <table class="table">
          <tbody>
            <tr>
              <td>分层名称</td>
              <td colspan="3">{{popupData.fcm}}</td>
            </tr>
            <tr>
              <td colspan="2">类型及名称</td>
              <td colspan="2">{{popupData.lxjmc}}</td>
            </tr>
            <tr>
              <td>自燃类型</td>
              <td>{{popupData.zrlx}}</td>
              <td>自燃点数量</td>
              <td>{{popupData.zrdsl}}</td>
            </tr>

            <tr>
              <td>自理数量</td>
              <td>{{popupData.zlsl}}</td>
              <td>验收情况</td>
              <td>{{popupData.ysqk}}</td>
            </tr>
            <tr>
              <td colspan="2">SO2年排放量</td>
              <td colspan="2">{{popupData.so2pfl}}</td>
            </tr>
            <tr>
              <td colspan="2">NOX年排放量</td>
              <td colspan="2">{{popupData.noxpfl}}</td>
            </tr>
            <tr>
              <td>颗粒物年排放量</td>
              <td>{{popupData.klwpfl}}</td>

              <td>面积</td>
              <td>{{popupData.mj}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else-if="popupData.contentType=='landuse'">
        <table class="table">
          <tbody>
            <tr>
              <td>地类名称</td>
              <td colspan="3">{{popupData.DLMC}}</td>
            </tr>
            <tr>
              <td colspan="2">权属性质</td>
              <td colspan="2">{{popupData.QSXZ}}</td>
            </tr>
            <tr>
              <td>权属单位名称</td>
              <td>{{popupData.QSDWMC}}</td>
              <td>图斑面积</td>
              <td>{{popupData.TBMJ}}</td>
            </tr>

            <tr>
              <td>耕地类型</td>
              <td>{{popupData.GDLX}}</td>
              <td>数据年份</td>
              <td>{{popupData.SJNF}}</td>
            </tr>
          </tbody>
        </table>
      </div>
                </a-card>
  </div>
</template>
<script>

import config from '../../config/config';
import commonOper from '../../scripts/commonOper';
export default {
  name: 'PopUp',
  data() {
    return {
      visablestyle: { display: 'none', top: '0px' },
      popupData: {},
      tabactiveKey:'00',
      chartactiveKey:'20',
      forceRender:true,
      qy_basic_info:true,
      qy_basic_chart:false,
      localQyStaticData:[],
      G0Chart:null,
      g0option: {
        title: [
          {
            text: '排放占比',
            subtext: '',
            x: 'center',
            y: 'top',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: 'white'
            }
          }
        ],
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: '0%',
          data: ['烟尘', '二氧化硫', '氮氧化物'],
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            type: 'pie',
            selectedMode: 'single',
            center: ['50%', '50%'],
            radius: ['28%', '64%'],
            color: ['#FC30EE', '#0EF100', '#F49F42'],
            label: {
              normal: {
                formatter: '{b|{b}}\n{hr|}\n{d|{d}%}',
                rich: {
                  b: {
                    fontSize: 12,
                    color: '#fff',
                    align: 'center',
                    padding: 4
                  },
                  hr: {
                    borderColor: '#12EABE',
                    width: '100%',
                    borderWidth: 2,
                    height: 0
                  },
                  d: {
                    fontSize: 12,
                    color: '#fff',
                    align: 'center',
                    padding: 4
                  },
                  c: {
                    fontSize: 12,
                    color: '#fff',
                    align: 'center',
                    padding: 4
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 15,
                length2: 15,
                lineStyle: {
                  type: 'dashed',
                  width: 2
                }
              }
            },

            data: []
          }
        ]
      },
      G1Chart:null,
      g1option:{
        
        //backgroundColor: '#043491',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          x: 'center',
          y: '4px',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 13
          },
          icon: 'circle',
          data: ['烟尘排量', '二氧化硫排量', '氮氧化物排量']
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 20,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 90,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        grid: {
          right: '5%',
          bottom: '10%',
          left: '2%',
          top: '80px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            name: '时间',
            nameTextStyle: {
              color: '#d4ffff'
            },
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#FFF',
                fontSize: 12
              }
              //interval:0,
              //rotate:30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '千克',
            nameTextStyle: {
              color: '#d4ffff'
            },
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisLabel: {
              color: '#d4ffff',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '烟尘排量',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#FC30EE'
              }
            },
            data: []
          },
          {
            name: '二氧化硫排量',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#0EF100'
              }
            },
            data: []
          },
          {
            name: '氮氧化物排量',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#F49F42'
              }
            },
            data: []
          }
        ]
      },
    };
  },
  props: {
    popupOption: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    // var height = this.$refs.popup.offsetHeight;
    // this.visablestyle.top = '-' + height + 'px';
    
  },
  watch: {
    popupOption() {
      this.popupData = this.popupOption;
      //   var o = document.getElementById('popup');
      //   var h = o.clientHeight||o.offsetHeight;

      this.visablestyle.display = this.popupData.display;
      if (this.popupData.contentType == 'qy_basic') {
        this.$nextTick(() => {
          this.initQyBasicCharts();
        });
        this.queryQyStaticData(this.popupData.qybh);
      }
    }
  },
  methods: {
    popupClose() {
      this.visablestyle.display = 'none';
      this.tabactiveKey='00';
      this.chartactiveKey='20';
      this.gobasicinfo();
    },
    basic_static(qybh){
      //console.log('qybh',qybh);
      this.qy_basic_info=false;
      this.qy_basic_chart=true;
      
      this.fillChart(qybh);
    },
    gobasicinfo(){
      this.qy_basic_info=true;
      this.qy_basic_chart=false;
    },
    initQyBasicCharts() {
      let that = this;
      let chartDiv = document.getElementById('realst');
      
      that.G0Chart = that.$echarts.init(chartDiv);
      that.G0Chart.setOption(that.g0option);
      window.onresize = that.G0Chart;
      
      let chartDiv1 = document.getElementById('historyst');
      
      that.G1Chart = that.$echarts.init(chartDiv1);
      that.G1Chart.setOption(that.g1option);
      window.onresize = that.G1Chart;

    },
    queryQyStaticData(qybh){
      var year=2018;
      var month=5;
      var day=31;
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/qyjcdrecord/queryStaticQyAndJcdPfInEveryDay?qybh='+qybh+'&year='+year+'&month='+month+'&day='+day,
        successFunc: response => {
          //console.log(response.data.data);
          that.localQyStaticData=response.data.data;
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpGet(param);
    },
    fillChart(qybh){
      let that=this;
      var qyzpf=that.localQyStaticData.qyTotalPfInOneDay;

      var qydaypf=that.localQyStaticData.qyTotalPfInEveryDay;

      var jcdpf=that.localQyStaticData.qyAllJcdPfInEveryDay;
      let xdata = [];
      let ycnd = [];
      let sond = [];
      let nond = [];
      let g0data=[];
      if(qybh.length>7){
        //console.log(jcdpf);
        let jcdarr=[];
        for(var i=0;i<jcdpf.length;i++){
          if(jcdpf[i].jcdbh==qybh){
            jcdarr.push(jcdpf[i]);
          }
        }
        for(var j=0;j<jcdarr.length;j++){
          ycnd.push(jcdarr[j].ycpl.toFixed(2));
          sond.push(jcdarr[j].sotwopl.toFixed(2));
             
          nond.push(jcdarr[j].nopl.toFixed(2));
          xdata.push(
            jcdarr[j].jcyear + '年' + jcdarr[j].jcmoonth + '月' + jcdarr[j].jcday + '日'
          );
          if(jcdarr[j].jcyear==2018&&jcdarr[j].jcmoonth==5&&jcdarr[j].jcday==31){
            g0data = [
              { name: '烟尘', value: jcdarr[j].ycpl.toFixed(2) },
              { name: '二氧化硫', value: jcdarr[j].sotwopl.toFixed(2) },
              { name: '氮氧化物', value: jcdarr[j].nopl.toFixed(2) }
            ];
          }
        }

      }else{
        for(var k=0;k<qydaypf.length;k++){
          ycnd.push(qydaypf[k].ycpl.toFixed(2));
          sond.push(qydaypf[k].sotwopl.toFixed(2));
             
          nond.push(qydaypf[k].nopl.toFixed(2));
          xdata.push(
            qydaypf[k].jcyear + '年' + qydaypf[k].jcmoonth + '月' + qydaypf[k].jcday + '日'
          );
        }
        g0data = [
          { name: '烟尘', value: qyzpf.ycpl.toFixed(2) },
          { name: '二氧化硫', value: qyzpf.sotwopl.toFixed(2) },
          { name: '氮氧化物', value: qyzpf.nopl.toFixed(2) }
        ];

      }
      that.g0option.series[0].data = g0data;
      that.G0Chart.setOption(that.g0option);
      window.onresize = that.G0Chart;

      that.g1option.xAxis[0].data = xdata;
      that.g1option.series[0].data = ycnd;
      that.g1option.series[1].data = sond;
      that.g1option.series[2].data = nond;
      that.G1Chart.setOption(that.g1option);
      window.onresize = that.G1Chart;
    }
  }
};
</script>
<style scoped>

.popover {
    /* margin-top: 240px; */
    /* margin-left: 220px; */
    width:580px;
    background-color: rgba(0, 0, 0, 0.65);
}
.popover.bottom>.arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-top-width: 0;
}
.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}
.popover-content {
    padding: 9px 14px;
}
.table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px 15px;
    border-top: 1px solid #eeeff1;
}
.arrow:before, .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 9px;
    content: "";
}
.popover.bottom>.arrow:after {
    top: 1px;
    margin-left: -10px;
    border-bottom-color: #fff;
    border-top-width: 0;
    content: " ";
}

.popover>.arrow:after {
    border-width: 10px;
    content: "";
}

.popover>.arrow, .popover>.arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.arrow:after {
    border-width: 8px;
}
.table {
    width: 100%;
    max-width: 100%;
}

table {
    background-color: transparent;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table {
    border-collapse: collapse;
}
.table>tbody>tr>td{
  border-top: 1px solid #9999ff;
}
</style>

